import React, { useState } from 'react'
// createPortal 可以将内容组件传递到项目页面中的指定位置
import { createPortal } from 'react-dom'
import './23.style.css'

export default function App() {

    const [isshow, setisshow] = useState(false)

    const protalHtml = isshow && createPortal((<div className='box'>
        <p>
            弹出的内容
            <button onClick={() => {
                setisshow(false)
            }}>X</button>
        </p>
    </div>), document.querySelector('body'))

    return (
        <div>
            <div id='app'></div>
            {protalHtml}
            <button onClick={() => {
                setisshow(true)
            }}>点击弹出</button>
        </div>
    )
}
